<template>
  <div class="pc-login">
    <div class="pc-login-box">
      <box-header type="login"></box-header>
      <div class="pc-login-type">
        <span class="pc-login-weChat">
          <a href="javascript:;" class="weChat" :class="{'weChat-active': weChat}" @click="chooseWechat">微信登录</a>
        </span>
        <span class="pc-login-account">
          <a href="javascript:;" class="account" :class="{'account-active': !weChat}" @click="chooseAccount">账号登录</a>
        </span>
      </div>
      <div class="pc-login-qr" id="login-code" v-show="weChat"></div>
      <div class="pc-login-input" v-show="!weChat">
        <form>
          <div class="phoneNumber-wrapper">
            <mt-field :state="state.phone" placeholder="请输入您的手机号" type="phone" v-model="phoneNumber"></mt-field>
            <p class="tips" v-show="state.phone === 'error'">请确认您的手机号码格式</p>
          </div>
          <mt-field placeholder="请输入密码" type="password" v-model="password"></mt-field>
        </form>
        <a href="javascript:;" class="btn-submit-pc" @click="login"
           :class="{'btn-readonly-pc': state.phone === 'error' || !phoneNumber || !password}">立即登录</a>
        <div class="pc-login-input-detail">
          <a href="javascript:;" class="box" @click="accept">
            <img width="100%" height="100%" src="../../assets/img/pc-get.png" v-if="acceptRule"/>
          </a>
          <span>下次自动登录</span>
          <span class="forget"><a href="javascript:;" @click="pcForget">忘记密码</a></span>
        </div>
      </div>
    </div>
    <script type="application/javascript">
      //获取微信登录二维码
      function getCode() {
        // let state = Math.ceil(Math.random() * 1000)
        // document.cookie = "state=" + state
        let obj = new WxLogin({
          id: 'login-code',
          appid: 'wxf9a3b0d35bf5a0a8',
          scope: 'snsapi_login',
          redirect_uri: encodeURIComponent('http://www.h5youx.com/game/index.php?m=Home&c=PcApi&a=callBack')
        });
      }
      getCode()
    </script>
  </div>
</template>
<script type="text/ecmascript-6">
  import BoxHeader from '../../components/common/pc-box-header/box-header'

  export default {
    data() {
      return {
        weChat: true,
        acceptRule: false,
        auto: 0,
        phoneNumber: '',
        password: '',
        state: {phone: ''}
      }
    },
    watch: {
      phoneNumber(value) {
        if (value.length > 11 || value.indexOf('1') !== 0) {
          this.state.phone = 'error'
        } else {
          this.state.phone = 'success'
        }
      }
    },
    methods: {
      chooseWechat() {
        this.weChat = true
      },
      chooseAccount() {
        this.weChat = false
      },
      login() {
        if (this.state.phone === 'success' && this.phoneNumber && this.password) {
          this.$http.post('/game/index.php?m=Home&c=PcApi&a=login', {
            params: {
              phone: this.phoneNumber,
              password: this.password,
              auto: this.auto
            }
          }).then((response) => {
            if (response.data.code === this.ERROR_OK) {
              this.Toast({
                message: '登录成功！',
                duration: 1000
              })
              setTimeout(() => {
                this.eventBus.$emit('PCLogin', true)
                location.reload()
              }, 1000)
            } else {
              this.Toast({
                message: response.data.info,
                duration: 1000
              })
            }
          })
        }
      },
      pcForget() {
        this.eventBus.$emit('pcForget', true)
      },
      accept() {
        if (this.state.phone === 'success' && this.phoneNumber && this.password) {
          this.auto = 1
          this.acceptRule = !this.acceptRule
        } else {
          this.Toast({
            message: '请输入账号和密码',
            duration: 2000
          })
        }
      }
    },
    created() {
      //判断用户是否为自动登录
      this.$http.get('/game/index.php?m=Home&c=PcApi&a=auto').then((response) => {
        if (response.data.code === this.ERROR_OK) {
          this.auto = 1
        }
      })
    },
    components: {
      BoxHeader
    }
  }
</script>

<style type="text/css">
  .pc-login {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .2);
    z-index: 100;
  }

  .pc-login img {
    border-radius: 0;
  }

  .pc-login .pc-login-box {
    width: 643px;
    min-height: 533px;
    background: #fff;
    border-radius: 10px;
  }

  .pc-login .pc-login-box .pc-login-type {
    display: inline-flex;
    margin-top: 54px;
    width: 100%;
    justify-content: center;
  }

  .pc-login .pc-login-box .pc-login-qr {
    padding: 50px 175px 0 175px;
    width: 100%;
  }

  .pc-login .pc-login-box .pc-login-qr . qr-code {
    width: 200px;
    height: 200px;
  }

  .pc-login .pc-login-box .pc-login-input {
    padding: 16px 158px 50px 158px;
  }

  .pc-login .pc-login-box .pc-login-input .phoneNumber-wrapper {
    position: relative;
  }

  .pc-login .pc-login-input-detail {
    position: relative;
    display: inline-flex;
    margin: 24px auto 0 auto;
    width: 100%;
  }

  .pc-login .pc-login-input-detail span {
    display: block;
    font-size: 24px;
    color: #666;
  }

  .pc-login .pc-login-input-detail .box {
    margin-right: 8px;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 0, 0, .2);
    border-radius: 1px;
  }

  .pc-login .pc-login-box .pc-login-input .pc-login-input-detail .forget {
    position: absolute;
    right: 0;
  }

  .pc-login .pc-login-box .pc-login-qr .pc-login-qr-text {
    margin-top: 16px;
    font-size: 24px;
    color: #666;
  }

  .pc-login .pc-login-box .pc-login-type .pc-login-weChat .weChat, .pc-login .pc-login-box .pc-login-type .pc-login-account .account {
    font-size: 32px;
    padding-bottom: 15px;
    border-bottom: 3px solid #FFF;
  }

  .pc-login .pc-login-box .pc-login-type .pc-login-weChat .weChat {
    margin-right: 140px;
  }

  .pc-login .pc-login-box .pc-login-type .pc-login-weChat .weChat-active, .pc-login .pc-login-box .pc-login-type .pc-login-account .account-active {
    border-bottom: 3px solid #2ECC40;
    color: #2ECC40;
  }
</style>
